<template>
  <div class="case">
    <na-table :datas.sync="tableData" :searchObj.sync="search" @newAdd="newAddOrder(ops)" @updateDatas="getAllLists" @change="handleSelectChange">
    </na-table>
    <!-- 撤单原因   -->
    <el-dialog :title="ops === 'cancelOrder' ? '撤单原因' : '作废原因'" :visible.sync="reasonVisible"
      :close-on-click-modal="false" custom-class="comDialog" append-to-body width="30%" @close="closeCancelDialog">
      <div class="dialogDody">
        <el-form ref="cancelForm" :model="cancelForm" :rules="rules" label-width="0px" class="dialogForm">
          <el-form-item label="" prop="reason">
            <el-input v-model="cancelForm.reason" type="textarea" :autosize="{ minRows: 2 }" placeholder="请输入内容"
              size="mini" clearable />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reasonVisible = false">取 消</el-button>
        <el-button :loading="addLableLoading" :disabled="addLableLoading" element-loading-spinner="el-icon-loading"
          type="primary" size="mini" @click="saveReason">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import naTable from "@/components/naTable";
  import {
    arraySort
  } from "@/utils";

  export default {
    name: "PlaceAnOrder",
    components: {
      naTable
    },
    data() {
      return {
        ops: "cancelOrder",
        addLableLoading: false,
        reasonVisible: false, // 原因弹框是否打开
        searchLoading: false, // 业务开单列表加载效果
        isShowOption: false,
        search: {
          pageIndex: 1,
          pageSize: 30,
          likeWords: "",
          QueryDataBaseFiled: "",
          customerCode: "",
          orderType: "",
          queryCondition: '7',
          orderState: -1,
          produceState: -1,
          financeState: -1,
          deliveryState: -1,
        }, // 销售订单搜索条件
        toolShow: true,
        cancelForm: {
          orderID: "",
          orderNo: "",
          reason: "",
        }, // 撤单，作废原因
        dataLists: [],
        tableScreenHead: [],
        rules: {
          reason: [{
            required: true,
            message: "请填写原因",
            trigger: ["change", "blur"],
          }, ],
        },

        tableData: {
          headId: 'head', //表头列显隐组件所需ID-避免多个页面id重复问题
          tableId: 'orderID', //表格列表key,也就是一条数据的唯一标识
          senior: false, //高级搜索是否显示
          disableWord: '', //是否禁用显示的字段
          disableStatus: '', //判断未禁用的状态值
          addPermission: 'MenuCode1-1-1', //新建按钮权限
          voidWord: '', //需要查询作废的字段
          statusList: [{
              label: '全部',
              value: '7'
            },
            {
              label: '待确认',
              value: '0'
            },
            {
              label: '彩稿待上传',
              value: '1'
            },
            {
              label: '彩稿待审核',
              value: '2'
            },
            {
              label: '待生产',
              value: '3'
            },
            {
              label: '生产中',
              value: '4'
            },
            {
              label: '完成',
              value: '5'
            },
            {
              label: '撤单',
              value: '6'
            },
          ], //状态筛选条件列表
          statusWord: 'queryCondition', //状态筛选的字段
          //表格按钮
          operationBtn: [{
              title: '查看', //按钮名称
              methodsName: 'seeDetail', //按钮绑定方法的字段
            },
            {
              title: '新版开单',
              methodsName: 'newAddOrder',
              hideCondition: { //按钮显隐条件
                prop: 'isOldSystemOrder', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  1,
                ],
              },
            },
            {
              title: '修改',
              methodsName: 'editOrder',
              permission: "MenuCode1-1-2", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'orderState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  0,
                ],
              },
            }, {
              title: '撤回',
              methodsName: 'withdraw',
              permission: "MenuCode1-1-8", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'orderState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  1,
                ],
              },
            },
            {
              title: '确认订单',
              methodsName: 'confirmOrder',
              permission: "MenuCode1-1-3", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'orderState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  0,
                ],
              },
            },
            {
              title: '老版复制',
              methodsName: 'oldVersionCopy',
              permission: "MenuCode1-1-5", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'orderState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                ],
                except: 0, //除了某个状态其他都可以使用
              },
            },
            {
              title: '复制',
              methodsName: 'newVersionCopy',
              permission: "MenuCode1-1-6", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'orderState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                ],
                except: 0, //除了某个状态其他都可以使用
              },
            },
            {
              title: '改版复制',
              methodsName: 'revisionCopy',
              permission: "MenuCode1-1-7", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'orderState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                ],
                except: 0, //不等于的状态值
              },
            },
            {
              title: '删除',
              methodsName: 'deleteOrder',
              permission: "MenuCode1-1-4", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'orderState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  0,
                ],
              },
            },
            {
              title: '作废',
              methodsName: 'nullifyClick',
              permission: "MenuCode1-1-10", //按钮权限
              isShowCheckbox:true,
              hideCondition: { //按钮显隐条件
                prop: 'isVoid', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  1,
                ],
              },
            },
            {
              title: '客户撤单',
              methodsName: 'cancelClick',
              permission: "MenuCode1-1-9", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'isCancel', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  1,
                ],
              },
            },
          ],
          //表格内容
          tbody: [],
          //表格表头
          thead: [],
        }
      };
    },
    created() {
      // 业务开单列表表格表头
      this.getTableHead();
      // 业务开单列表表格内容
      this.getAllLists();
    },
    mounted() {},
    methods: {
      // 撤单，作废
      saveReason() {
        this.$refs.cancelForm.validate((valid) => {
          if (valid) {
            if (this.ops === "cancelOrder") {
              // 撤单
              this.cancelOrder();
            } else {
              // 作废接口调用
              this.nullifyOrder();
            }
          }
        });
      },

      handleSelectChange(e){
        this.search.pageIndex = 1
        this.getAllLists()
      },


      // 作废接口调用
      nullifyOrder() {
        const parmas = {
          orderID: this.cancelForm.orderID,
          scrapRemark: this.cancelForm.reason,
        };
        this.$confirm("确定作废?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.addLableLoading = true;
          this.$api.business
            .ScrapSaleOrder(parmas)
            .then(() => {
              this.$message({
                message: "作废成功",
                type: "success",
              });
              this.reasonVisible = false;
              this.addLableLoading = false;
              this.getAllLists();
            })
            .catch(() => {
              this.reasonVisible = false;
              this.addLableLoading = false;
            });
        });
      },
      // 作废点击事件
      nullifyClick(row) {
        this.cancelForm.orderID = row.orderID;
        this.reasonVisible = true;
        this.ops = "nullifyOrder";
      },
      // 撤单接口
      cancelOrder() {
        const parmas = {
          orderID: this.cancelForm.orderID,
          orderNo: this.cancelForm.orderNo,
          cancelReason: this.cancelForm.reason,
        };
        this.$confirm("确定撤单?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.addLableLoading = true;
          this.$api.business
            .CancelSaleOrder(parmas)
            .then(() => {
              this.$message({
                message: "撤单成功",
                type: "success",
              });
              this.reasonVisible = false;
              this.addLableLoading = false;
              this.getAllLists();
            })
            .catch(() => {
              this.reasonVisible = false;
              this.addLableLoading = false;
            });
        });
      },
      // 撤单点击事件
      cancelClick(row) {
        this.cancelForm.orderID = row.orderID;
        this.cancelForm.orderNo = row.orderNo;
        this.reasonVisible = true;
        this.ops = "cancelOrder";
      },
      // 改版复制
      revisionCopy(row) {
        this.$router.push({
          path: "/business/addOrder", // 跳转的路径
          query: {
            isCopy: true,
            isCreateNewOrder: true,
            excuteAction: "改版",
            orderID: row.orderID,
            orderNo:row.orderNo
          },
        });
      },
      // 新版复制
      newVersionCopy(row) {
        this.$router.push({
          path: "/business/addOrder", // 跳转的路径
          query: {
            isCopy: true,
            isCreateNewOrder: true,
            excuteAction: "新版",
            orderID: row.orderID,
            orderNo:row.orderNo
          },
        });
      },
      // 老版复制
      oldVersionCopy(row) {
        this.$router.push({
          path: "/business/addOrder", // 跳转的路径
          query: {
            isCopy: true,
            isCreateNewOrder: true,
            excuteAction: "老版",
            orderTypeTitle: "老版复制",
            orderID: row.orderID,
            orderNo:row.orderNo
          },
        });
      },
      // 订单撤回
      withdraw(row) {
        const parmas = {
          orderID: row.orderID,
        };
        this.$confirm("确定撤回订单?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$api.business.RevocationSaleOrder(parmas).then(() => {
            this.$message({
              message: "撤回成功",
              type: "success",
            });
            this.getAllLists();
          });
        });
      },
      // 删除订单
      deleteOrder(row) {
        const parmas = {
          orderID: row.orderID,
        };
        this.$confirm("确定删除订单?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$api.business.DeleteSaleOrder(parmas).then(() => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getAllLists();
          });
        });
      },
      // 修改订单事件
      editOrder(row) {
        this.$router.push({
          path: "/business/addOrder", // 跳转的路径
          query: {
            isCopy: false,
            isCreateNewOrder: false,
            excuteAction: row.printingSurface,
            orderID: row.orderID,
            orderNo: row.orderNo,
          },
        });
      },
      // 查看订单事件
      seeDetail(row) {
        this.$router.push({
          path: "/business/orderDetail", // 跳转的路径
          query: {
            saleOrderID: row.orderID,
            orderNo: row.orderNo,
            tabIndex: 0,
          },
        });
      },
      // 确认订单事件
      confirmOrder(row) {
        this.$router.push({
          path: "/business/orderConfirm", // 跳转的路径
          query: {
            saleOrderID: row.orderID,
          },
        });
      },
      // 新建开单点击事件
      newAddOrder(row) {
        this.$router.push({
          path: "/business/addOrder", // 跳转的路径
          query: {
            isCopy: false,
            isCreateNewOrder: true,
            excuteAction: "初版",
            orderID: row.orderID || '',
            orderNo: row.orderNo || '',
          },
        });
      },
      // 获取仓库管理列表表格表头
      getTableHead() {
        const parmas = {
          tableCode: this.$config.saleorderlist,
        };
        this.$api.common.getAllTableHead(parmas).then((res) => {
          res.sort(arraySort("columnSort"));
          this.tableData.thead = res;
        });
      },
      // 得到业务开单所有数据列表
      getAllLists() {
        const parmas = this.search;
        this.searchLoading = true;
        this.isShowOption = false
        this.$api.business
          .GetMatchPageSaleOrders(parmas)
          .then((res) => {
            let list = res.list;
            if (list.length > 0) {
              list.forEach((item) => {
                item.isVoid = 0; //允许作废
                item.isCancel = 0; //允许客户撤单
                if (item.orderState === 1 && item.produceState === 0) {
                  item.isVoid = 1;
                }
                if (item.orderState === 1 && item.produceState === 1) {
                  item.isCancel = 1;
                }
              });
            }
            this.isShowOption = true
            this.tableData.tbody = list;
            this.search.total = res.totalCount;
            this.searchLoading = false;
          })
          .catch(() => {
            this.searchLoading = false;
            this.isShowOption = true
          });
      },
      closeCancelDialog() {
        if (this.$refs.cancelForm) {
          this.$refs.cancelForm.resetFields();
        }
        this.cancelForm = this.$options.data().cancelForm;
      },
    },
  };

</script>
<style lang="scss" scoped>
  .spot {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 100%;
  }

</style>
